<template>
  <el-input
    v-model="name"
    suffix-icon="el-icon-user"
    placeholder="选择供应商"
    readonly
    :disabled="disabled"
    @click.native="handleSelect"
  />
</template>
<script>
export default {
  name: 'SupplierSelect',
  props: {
    value: [String, Number],
    readonly: { type: Boolean, default: false },
    disabled: { type: Boolean, default: false },
    change: { type: Function }
  },
  data: () => ({ name: '' }),
  methods: {
    handleSelect() {
      if (this.readonly || this.disabled) return
      const modal = this.$quickModal({
        title: '选择供应商',
        width: '900px',
        component: h =>
          h('suppliers', {
            props: this.$props,
            on: {
              change: data => {
                this.name = data.supplierName
                this.$emit('input', data.supplierId)
                this.change && this.change(data)
                modal.visible = false
              }
            }
          })
      })
    }
  }
}
</script>
